<script setup>
import { ref } from "vue";
import * as echarts from "echarts";
const option = ref({
  title: {
    text: "科学成就发明时间", // 修改标题
    left: "center",
    top: 15,
    textStyle: {
      color: "#2c3e50",
      fontSize: 18,
    },
  },
  // 核心配置：控制图表位置和边距

  grid: {
    left: "5%", // 左侧留3%间隔
    right: "10%", // 右侧留3%间隔
    top: "15%", // 顶部留10%间隔
    bottom: "10%", // 底部留15%间隔（确保x轴标签不溢出）
    containLabel: true, // 自动包含坐标轴标签区域
  },
  tooltip: {
    trigger: "axis",
    formatter: (e) => {
      // console.log(e);
      return `${e[0].name} : ${e[0].data}年被创造`;
    },
  },
  xAxis: {
    name: "发明",
    type: "category",
    data: [
      "造纸术改进", "指南车", "火药配方", "活字印刷", 
      "提花织机", "青瓷工艺", "复闸系统", "浑天仪", 
      "耧车播种", "龙骨水车", "九章算术", "圆周率精算",
      "伤寒病论", "本草纲目"
    ],
    axisLabel: { 
      rotate: 30,
      interval: 0,
      formatter: (value) => value.replace(/[a-zA-Z]/g, '') // 去除标签中字母‌:ml-citation{ref="7" data="citationList"}
    },
    boundaryGap: false, // 确保折线贴紧y轴
  },
  yAxis: {
    min: 0, //最小值
    max:1600,
    type: "value",
    name: "年份",
    axisLabel: {
     
        formatter: (value) => value + "年",
     
    },
    scale: true,
  },
  series: [
    {
      data: [
        105,   // 造纸术改进(蔡伦革新)‌:ml-citation{ref="6" data="citationList"}
        235,   // 指南车(马钧发明)‌:ml-citation{ref="3" data="citationList"}
        808,   // 火药配方(唐《铅汞甲庚》)‌:ml-citation{ref="5" data="citationList"}
        1040,  // 活字印刷(毕昇发明)‌:ml-citation{ref="6" data="citationList"}
        180,   // 提花织机(王逸记载)‌:ml-citation{ref="3" data="citationList"}
        200,   // 青瓷工艺(成熟期)‌:ml-citation{ref="3" data="citationList"}
        984,   // 复闸系统(乔维岳)‌:ml-citation{ref="6" data="citationList"}
        132,   // 浑天仪(张衡)‌:ml-citation{ref="3" data="citationList"}
        100,   // 耧车播种(西汉改良)‌:ml-citation{ref="3" data="citationList"}
        186,   // 龙骨水车(毕岚)‌:ml-citation{ref="3" data="citationList"}
        50,    // 九章算术(成书)‌:ml-citation{ref="6" data="citationList"}
        480,   // 圆周率精算(祖冲之)‌:ml-citation{ref="5" data="citationList"}
        210,   // 伤寒病论(张仲景)‌:ml-citation{ref="3" data="citationList"}
        1578   // 本草纲目(李时珍)‌:ml-citation{ref="6" data="citationList"}
      ],
      type: "line",
      showSymbol: false,
      lineStyle: {
        color: new echarts.graphic.LinearGradient(
          0,
          1,
          0,
          0, // 渐变方向：从左到右 (x0, y0, x1, y1)
          [
            { offset: 0, color: "#b4b4d5" }, // 柔和的淡黄色（起点）
            { offset: 0.3, color: "#8481ba" }, // 中间过渡色（橙黄色）
            { offset: 1, color: "#614099" }, // 柔和的珊瑚红（终点）
          ]
        ),
        width: 3, // 线条宽度
      },
    },
  ],
});
</script>

<template>
  <!-- 科学成就的折线图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
